import * as THREE from 'three';
import { BufferGeometry, Color, Geometry, Material, Texture } from 'three';
import BaseThreeApp from '../BaseThreeApp';
import DebugInfo from '../DebugInfo';

class _1_1Cube extends BaseThreeApp {
  public scene: THREE.Scene;
  public camera: THREE.Camera;
  public renderer: THREE.WebGLRenderer;
  public cube: THREE.Mesh;
  public geos: (Geometry | BufferGeometry)[] = [];
  public mats: Material[] = [];
  public texs: Texture[] = [];

  start() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      60,
      this.clientWidth / this.clientHeight,
      0.1,
      1000
    );
    this.camera.position.z = 5;

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.element,
    });

    this.renderer.setDrawingBufferSize(this.clientWidth, this.clientHeight, 1);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    // geometry.computeVertexNormals();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);

    const light = new THREE.DirectionalLight(0xffffff, 0.5);
    light.position.set(0, 1, 0);
    this.scene.add(light);

    const linGeo = new THREE.Geometry();
    const lineMat = new THREE.LineBasicMaterial({ vertexColors: true });
    linGeo.vertices.push(new THREE.Vector3(-3, 2, 0));
    linGeo.vertices.push(new THREE.Vector3(3, 2, 0));
    linGeo.vertices.push(new THREE.Vector3(3, -2, 0));
    linGeo.vertices.push(new THREE.Vector3(-3, -2, 0));
    linGeo.colors.push(new THREE.Color(0x444444));
    linGeo.colors.push(new THREE.Color(0xff0000));
    linGeo.colors.push(new THREE.Color(0x004444));
    linGeo.colors.push(new THREE.Color(0xff00ff));

    const line = new THREE.LineLoop(linGeo, lineMat);
    //const line = new THREE.LineSegments(linGeo, lineMat);
    //const line = new THREE.LineSegments(linGeo, lineMat);
    this.scene.add(line);
    this.isRunning = true;
    const animate = (time) => {
      if (!this.isRunning || this.element === null) {
        return;
      }
      DebugInfo.Instance.begin();
      this.renderer.render(this.scene, this.camera);
      DebugInfo.Instance.end();
      requestAnimationFrame(animate);
      this.cube.rotation.x = 0.001 * time;
      this.cube.rotation.y = 0.001 * time;
    };
    animate(0);
  }

  onresize(e: UIEvent) {
    super.onresize(e);
    console.log('onresive');
    if (this.renderer) {
      this.renderer.setDrawingBufferSize(
        this.clientWidth,
        this.clientHeight,
        1
      );
      if (this.camera && this.camera instanceof THREE.PerspectiveCamera) {
        this.camera.aspect = this.clientWidth / this.clientHeight;
        this.camera.updateProjectionMatrix();
      }
    }
  }

  destory() {
    this.geos.forEach((v) => v.dispose());
    this.geos = [];
    this.mats.forEach((v) => v.dispose());
    this.mats = [];
    this.texs.forEach((v) => v.dispose());
    this.texs = [];

    super.destory();
  }
}

export default new _1_1Cube();
